<template>
	<div>
			<view class="show" >
				<view class="show-box" v-for="item in scenicList" :key='item.id'>
					<div style="display: flex; margin-bottom: 5px;">
						<img :src="item.hotelimages" alt="" >
						<div style=" overflow:auto;margin-left: 10px;">
							<view>酒店类型：{{ item.hoteltype}}</view>
						<view>酒店名称：{{ item.hotelname}}</view>
						<view style="color: red;">酒店价格：{{ item.hotelprice}}{{item.hotelprice?'元': ''}}</view>
							
					</div>
					</div>			
					     <span class="" style="display: flex;justify-content:space-between;"><view class="" style="width: 80%;">
					     	<span>地址：</span>{{item.hoteladdress }}
					     </view>
						 <button style="width: 60px; font-size: 16rpx; line-height: 30px; color: red;" @click="handleAdd(item)">点击预定</button>
						 </span>
			
				</view>
			</view>
		
			
			<view class="fotter">没有更多了......</view>
			
			
		</view>
		
	</div>
</template>

<script>
	import store from '../../store/index.js'
	export default {
		data () {
			return {
				
				scenicList:[]
			}
		},
		onLoad () {
			store.commit('getChange')
		},
		onShow () {
		this.fetchScenicList()	
			store.state.innerAudioContext.play() // 首页播放
		},
	
		methods: {
			nav (id) {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/particulars/index?id=${id}` 
				})
			},
			recommend (id) {
				console.log(id);
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/local/index?id=${id}` 
				})
				
			},
			ljs () {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/components/ljs` 
				})
			},
			handleAdd(row){
				const userId = uni.getStorageSync('userId');
				uni.request({
				   url: 'http://124.223.111.96:80/order/add',
				   method: 'POST',
				   data:{orderspid:row.hotelid,ordertype:2,userid:userId ,kflx:row.hoteltype,orderprice:row.hotelprice,orderimages:row.hotelimages,ordername:row.hotelname},
				   success: (res) => {
				     console.log(res)
					 uni.showToast({
					     title: '订单预定成功',
					     icon: 'success',
					     duration: 2000
					 });
					 this.fetchScenicList ()
				   },
				   fail: (err) => {
				     console.error('Error fetching data:', err);
				   }
				 });
			},
			fetchScenicList (){
				     uni.request({
				        url: 'http://124.223.111.96:80/hotel/getAll',
				        method: 'GET',
				        success: (res) => {
				          console.log(res.data.data);
						  this.scenicList= res.data.data
				        },
				        fail: (err) => {
				          console.error('Error fetching data:', err);
				        }
				      });
			},
			
			
	
		},
		onMounted() {
			
		},
		// 转发 点击右上角的三个点
			
		
	}
</script>

<style >
	h2 {
		text-align: center;
		margin: 20rpx 0 10rpx 0;
		color: #f00;
	}
	.banner {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 460rpx;
	}
	.swiper .swiper-item img {
		height: 300px;
		width: 100%;
		background-size: contain;
	}
	
	.recommend {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	
	.local {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.local view {
		margin-top: 10rpx;
	}
	
	.recommend img {
		width: 100rpx;
		height: 100rpx;
	}
	
	.person {
		margin-top: 40rpx;
	}

	.per-tj {
		display: flex;
		align-items: center;
	}

	.per-tj img {
		width: 100rpx;
		height: 100rpx;
	}
	.show {
		/* display: flex; */
		width: 750rpx;
	}
	.show-box {
		 border: 1px solid #ccc;
	padding: 10px;
	background-color: #e7e7e7;
	}
	.show-box view {
		/* text-align: center; */
	
		height: 60rpx;
		line-height: 60rpx;
	}
	.show-box img {
		width: 200px;
		height: 300rpx;
	}
	.show-box img:nth-child(2) {
		margin-left: 10rpx;
	}
	.fotter {
		margin-left: 10px;
		    color: #ccc;
		    margin-top: 10px;
	}
	
</style>
